---
metaTitle: Text Field
metaDescription: Captures user input with an optional slot for buttons and icons.
sourcePath: components/text-field
---

```jsx live=true
<TextField.Root placeholder="Search the docs…">
	<TextField.Slot>
		<MagnifyingGlassIcon height="16" width="16" />
	</TextField.Slot>
</TextField.Root>
```

## API Reference

### Root

Groups Slot and Input parts. This component is based on the `div` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

<ThemesPropsTable defs="textFieldRootPropDefs" />

### Slot

Contains icons or buttons associated with an Input.

<ThemesPropsTable defs="textFieldSlotPropDefs" />

## Examples

### Size

Use the `size` prop to control the size.

```jsx live=true
<Flex direction="column" gap="3">
	<Box maxWidth="200px">
		<TextField.Root size="1" placeholder="Search the docs…" />
	</Box>
	<Box maxWidth="250px">
		<TextField.Root size="2" placeholder="Search the docs…" />
	</Box>
	<Box maxWidth="300px">
		<TextField.Root size="3" placeholder="Search the docs…" />
	</Box>
</Flex>
```

Use matching component sizes when composing Text Field with buttons. However, don’t use size 1 inputs with buttons—at this size, there is not enough vertical space to nest other interactive elements.

```jsx live=true
<Flex direction="column" gap="3" maxWidth="400px">
	<Box maxWidth="200px">
		<TextField.Root placeholder="Search the docs…" size="1">
			<TextField.Slot>
				<MagnifyingGlassIcon height="16" width="16" />
			</TextField.Slot>
		</TextField.Root>
	</Box>

	<Box maxWidth="250px">
		<TextField.Root placeholder="Search the docs…" size="2">
			<TextField.Slot>
				<MagnifyingGlassIcon height="16" width="16" />
			</TextField.Slot>
			<TextField.Slot>
				<IconButton size="1" variant="ghost">
					<DotsHorizontalIcon height="14" width="14" />
				</IconButton>
			</TextField.Slot>
		</TextField.Root>
	</Box>

	<Box maxWidth="300px">
		<TextField.Root placeholder="Search the docs…" size="3">
			<TextField.Slot>
				<MagnifyingGlassIcon height="16" width="16" />
			</TextField.Slot>
			<TextField.Slot pr="3">
				<IconButton size="2" variant="ghost">
					<DotsHorizontalIcon height="16" width="16" />
				</IconButton>
			</TextField.Slot>
		</TextField.Root>
	</Box>
</Flex>
```

### Variant

Use the `variant` prop to control the visual style.

```jsx live=true
<Flex direction="column" gap="3" maxWidth="250px">
	<TextField.Root variant="surface" placeholder="Search the docs…" />
	<TextField.Root variant="classic" placeholder="Search the docs…" />
	<TextField.Root variant="soft" placeholder="Search the docs…" />
</Flex>
```

### Color

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx live=true
<Flex direction="column" gap="3" maxWidth="250px">
	<TextField.Root
		color="indigo"
		variant="soft"
		placeholder="Search the docs…"
	/>
	<TextField.Root color="green" variant="soft" placeholder="Search the docs…" />
	<TextField.Root color="red" variant="soft" placeholder="Search the docs…" />
</Flex>
```

### Radius

Use the `radius` prop to assign a specific radius value.

```jsx live=true
<Flex direction="column" gap="3" maxWidth="250px">
	<TextField.Root radius="none" placeholder="Search the docs…" />
	<TextField.Root radius="large" placeholder="Search the docs…" />
	<TextField.Root radius="full" placeholder="Search the docs…" />
</Flex>
```
